<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col :md="16">
        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>项目基础信息</span>
            <div class="float-right">
              <el-button type="primary" plain size="small">招标详情 </el-button>
              <el-button
                type="primary"
                size="small"
                icon="el-icon-sort"
                @click="$router.push('/bidding/evaluation_hall_purchaser')"
                >专家评标查看
              </el-button>
            </div>
          </div>

          <el-form :model="form" label-width="100px">
            <el-row :gutter="12">
              <el-col :md="12">
                <el-form-item label="招标名称">{{ form.title }}</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="招标编号">{{ form.code }}</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="采购单位">{{ form.company }}</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="招标方式">{{ form.way }}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>专家评标</span>
            <el-button type="primary" plain class="float-right" size="small"
              >历史评分
            </el-button>
          </div>
          <el-row :gutter="8">
            <el-col :md="6" v-for="(item, index) in expert" :key="index">
              <el-card shadow="never" style="background: #eee">
                {{ item.name }}
                <ul>
                  <li>技术标：{{ item.tec }}</li>
                  <li>商务标：{{ item.bus }}</li>
                </ul>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>供应商报价</span>
            <span style="margin-left: 20px; font-size: 13px; color: #f56c6c"
              ><i class="el-icon-warning"></i
              >&ensp;请注意本轮投标有4家供应商IP相同
            </span>
          </div>
          <el-table :data="lists" border highlight-current-row>
            <el-table-column
              label="序号"
              type="index"
              width="60"
              align="center"
            ></el-table-column>
            <el-table-column
              label="供应商名称"
              prop="supplier"
            ></el-table-column>
            <el-table-column label="联系人" prop="people"></el-table-column>
            <el-table-column label="手机号" prop="mobile"></el-table-column>
            <el-table-column
              label="报价次数"
              prop="offer_count"
            ></el-table-column>
            <el-table-column
              label="报价时间"
              prop="offer_time"
            ></el-table-column>
            <el-table-column label="状态" prop="status"></el-table-column>
            <el-table-column label="报价IP" prop="IP"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :md="8">
        <el-card shadow="never" class="mb-20">
          <div slot="header">
            <span>评标流程记录</span>
          </div>
          <div style="height: 200px">
            <el-steps direction="vertical" :active="1">
              <el-step
                title="签到"
                description="确认签到   2020-12-12  12:00:00"
              ></el-step>
              <el-step title="评标">
                <template slot="title">
                  <router-link to="/bidding/evaluation_hall_purchaser">
                    供应商报价
                  </router-link>
                </template>
              </el-step>
              <el-step title="拟定结果">
                <template slot="title">
                  <router-link to="/bidding/evaluation_result_purchaser">
                    拟定结果
                  </router-link>
                </template>
              </el-step>
            </el-steps>
          </div>
        </el-card>
        <el-card shadow="never" class="mb-20">
          <div slot="header">
            <span>在线沟通</span>
          </div>
          <ul class="list mb-20" style="list-style-type: none; padding: 0">
            <li class="clearfix mb-10" v-for="i in 6" :key="i">
              <span class="float-left">供应商{{ 1 }}</span>
              <span class="float-right">16:44:43</span>
            </li>
          </ul>
          <el-input
            type="textarea"
            v-model="message"
            placeholder="回车发送信息"
          ></el-input>
        </el-card>
        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>澄清公告</span>
            <el-button type="primary" plain class="float-right" size="small"
              >澄清
            </el-button>
          </div>
          <ul class="list">
            <li class="clearfix mb-10" v-for="i in 6" :key="i">
              <span class="float-left">澄清名称{{ i }}</span>
              <span class="float-right">16:44:43</span>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: "招标名称",
        code: "XJD-998376241",
        company: "叮当（天津）电子商务有限公司",
        way: "公开招标",
      },
      expert: [],
      lists: [
        {
          supplier: "五矿机电有限公司1",
          people: "联系人1",
          mobile: "13103436166",
          offer_count: "2",
          offer_time: "13103436166",
          status: Math.random() > 0.5 ? "已报价" : "待报价",
          IP: "221.239.1.186",
        },
        {
          supplier: "五矿机电有限公司2",
          people: "联系人1",
          mobile: "13103436166",
          offer_count: "2",
          offer_time: "13103436166",
          status: Math.random() > 0.5 ? "已报价" : "待报价",
          IP: "221.239.1.186",
        },
        {
          supplier: "五矿机电有限公司3",
          people: "联系人1",
          mobile: "13103436166",
          offer_count: "2",
          offer_time: "13103436166",
          status: Math.random() > 0.5 ? "已报价" : "待报价",
          IP: "221.239.1.186",
        },
      ],
      opinion: "",
      message: "",
    };
  },
  methods: {
    initExperts() {
      for (let i = 0; i < 4; i++) {
        this.expert.push({
          name: "张小刚",
          tec: "已完成评标",
          bus: "已完成评标",
        });
      }
    },
  },
  created() {
    this.initExperts();
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #e3e3e3;
  min-height: 100vh;
}
</style>
